<template name="reserve">
  <div class="view">
    <h2 class="title">订酒店</h2>
    <ul class="reserveGroup">
      <li>
        <el-input v-model="go" placeholder="出行目的地" class="go"></el-input>
      </li>
      <li>
        <el-input placeholder="请选择日期" suffix-icon="el-icon-date" v-model="start" class="time"></el-input>
      </li>
      <li>
        <el-input placeholder="请选择日期" suffix-icon="el-icon-date" v-model="end" class="time"></el-input>
      </li>
      <li>
        <el-input placeholder="人数未定" suffix-icon="el-icon-user" v-model="num"></el-input>
      </li>
      <li>
        <el-button type="primary" class="search">
          <i class="el-icon-search"></i>
        </el-button>
      </li>
    </ul>
    <ul class="service">
      <li>
        <i class="icon"></i>
        <span class="title">
          住宿攻略
          <span style="font-size: 12px;">区域攻略到特色主题，应有尽有</span>
        </span>
      </li>
      <li>
        <i class="icon icon2"></i>
        <span class="title">
          专享价格
          <span style="font-size: 12px;">多平台价格对比，天天专享特惠</span>
        </span>
      </li>
      <li>
        <i class="icon icon3"></i>
        <span class="title">
          真实点评
          <span style="font-size: 12px;">超过100万真实用户点评和游记</span>
        </span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "reserve",
  data() {
    return {
        go:'',
        start:'',
        end:'',
        num:null,
    };
  }
};
</script>

<style lang="stylus" scoped>
.view {
  width: 1000px;
  margin: auto;

  .title {
    font-weight: normal;
  }

  .reserveGroup {
    margin: 40px 0 70px 0;
    display: flex;
    justify-content: space-between;

    li {
      height: 47px;

      >>> input {
        width: 187px;
        border: 1px solid #999;

        &:focus {
          border: 1px solid #ff9d00;
          box-shadow: 0 0 3px #ff9d00;
        }
      }

      .time {
        >>> .el-input__suffix {
          color: orange;
        }
      }

      >>> .el-input {
        height: 100%;

        input {
          height: 100%;
        }
      }

      .go >>> input {
        width: 352px;
      }

      .search {
        background-color: orange;
        border: 1px solid orange;
        height: 100%;
        font-size: 23px;
        width: 50px;
        padding: inherit;
      }
    }
  }

  .service {
    height: 58px;
    font-size: 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 1000px;
    margin: auto;
    margin-top: 15px;

    li {
      display: flex;
      align-items: center;
      justify-content: center;
      color: #666;

      .icon {
        width: 44px;
        height: 42px;
        background-image: url('http://css.mafengwo.net/images/hotel/hotel_index/hotel-sprites1.png');
        background-repeat: no-repeat;
        display: inline-block;
        background-position: 5px 0px;
      }

      .icon2 {
        background-position: -39px 0;
      }

      .icon3 {
        background-position: -86px 0;
      }

      .title {
        display: grid;
        padding-left: 15px;
        box-sizing: border-box;
        height: 42px;
        font-size: 16px;
      }
    }
  }
}
</style>